<template>
  <view class="specialShop">
    <view class="topImg">
      <image :src="shopInfo.imgUrl"></image>
    </view>
    <view class="shopInfo">{{shopInfo.skuName}}</view>
    <view class="price">
      <span>￥</span>
      <span class="bigPrice">{{shopInfo.integer}}/台</span>
      <!-- <span>.{{shopInfo.decimal}}/台</span> -->
    </view>
    <view v-if="type == 'offer'" class="shop_row">
      <view class="rightBuy">
        <image src="../static/image/index/rightBuy.png" />立即抢购
      </view>
      <view class="shop_cart" @click.stop="handleAddShopping(shopInfo)">
        <img src="/static/image/shopping_cart.png" alt="添加购物车">
      </view>
    </view>
    <view v-if="type == 'new'" class="shop_row">
      <view v-if="type == 'new'" class="tagUp" :style="{'border': !!shopInfo.lableName ? '1rpx solid #FF5533' : 'none'}">{{shopInfo.lableName}}</view>
      <view class="shop_cart" @click.stop="handleAddShopping(shopInfo)">
        <img src="/static/image/shopping_cart.png" alt="添加购物车">
      </view>
    </view>
    <!-- 规格选择popup - 相关变量和方法均在addShoppingCartMixin混入中 -->
    <SelectSpecPopup
      callback-url="/pages/index/index"
      :speci-show.sync="speciPopup.show"
      :shop-num.sync="speciPopup.purchaseNum"
      :default-shop-num.sync="speciPopup.minOrderNum"
      :order-limit-type.sync="speciPopup.orderLimitType"
      :detail-info="speciPopup.details"
      :new-sku-infos="speciPopup.skuInfo"
      :sale-flag="speciPopup.isNotSale"
      @addShopCar="addPurchaseOrder"
      @buy="purchaseNow"
      @changeSpeci="changeSpecSelect"
    />
<!--    <view class="tagUp tagWell" v-if="shopInfo == 6">实用好物</view>-->
  </view>
</template>

<script>
import SelectSpecPopup from '@/components/select-spec-popup/index'
import addShoppingCartMixin from '@/shopDetail/addShoppingCartMixin'
export default {
  components: { SelectSpecPopup },
  mixins: [addShoppingCartMixin],
  props: ['shopInfo', 'type'],
  methods: {
    goShopDetail(item) {
      uni.navigateTo({
        url: '/shopDetail/index?spuCode=' + this.shopInfo.spuCode
      })
    }
  }
}
</script>

<style scoped lang="scss">
.bigPrice {
  position: relative;
  top: 4rpx;
  /* #ifdef MP-ALIPAY */
  top: 6rpx;
  /* #endif */
}
.specialShop{
  //width: 196rpx;
  background: #FFFFFF;
  padding-bottom: 16rpx;
  box-sizing: border-box;
  border-radius: 8rpx;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
  .topImg {
    width: 196rpx;
    height: 196rpx;
    margin: 0 auto;
    image {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .shopInfo{
    width: 164rpx;
    margin: 0 auto;
    box-sizing: border-box;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    color: rgba(34,34,34,1);
    font-size: 28rpx;
    font-weight: 400;
  }
  .price {
    display: flex;
    align-content: flex-end;
    align-items: flex-end;
    width: 100%;
    padding: 0rpx 16rpx;
    box-sizing: border-box;
    white-space: nowrap;
    span:first-child {
      color: rgba(255,85,51,1);
      font-size: 24rpx;
      font-weight: 700;
    }
    span:nth-child(2) {
      color: rgba(255,85,51,1);
      font-size: 32rpx;
      font-weight: 700;
    }
    span:last-child {
      color: rgba(255,85,51,1);
      font-size: 24rpx;
      font-weight: 400;
    }
  }
  .rightBuy{
    width: 126rpx;
    height: 32rpx;
    display: flex;
    justify-content: flex-start;
    color: rgba(255,85,51,1);
    font-size: 20rpx;
    font-weight: 400;
    align-content: center;
    align-items: center;
    border: 1rpx solid rgba(255,85,51,1);
    background: rgba(255,255,255,1);
    margin: 8rpx 0rpx 0rpx 16rpx;
    border-radius: 8rpx;
    overflow: hidden;
    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 8rpx;
    }
  }
  .tagUp{
    display: inline-flex;
    padding: 4rpx 8rpx;
    box-sizing: border-box;
    border: 1rpx solid #FF5533;
    color: #FF5533;
    margin-left: 16rpx;
    margin-top: 8rpx;
    font-size: 20rpx;
    border-radius: 4rpx;
    min-height: 32rpx;
  }
  .tagWell{
    border: 1rpx solid #379EFC !important;
    color: #379EFC !important;
  }

  .shop_row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 12rpx;
    padding-right: 12rpx;
    .shop_cart {
      margin-top: 3rpx;
      img {
        display: block;
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>
